import React, { Fragment } from "react";
import { When } from "../../../common/if";
import Loading from "../../../common/loading";
import { Table, Pagination, Icon, Result } from "weaver-mobile";

export default class AppDataView extends React.Component {
  static defaultProps = {
    columns: [],
    datas: [],
    pagination: null
  };

  render() {
    const { columns, datas, loading, noForm, pagination } = this.props;
    const ROW_HEIGHT = 44;
    const hasMoreData = Boolean(pagination && pagination.total > 1);
    const hasNoData = datas.length === 0 && !hasMoreData;

    return (
      <Fragment>
        <When condition={!!columns.length}>
          <Table
            className='wea-edc-table'
            tableHeight={ROW_HEIGHT * (1 + datas.length)}
            columns={columns}
            dataSource={datas}
            loading={loading ? <Loading loading={loading} content='正在加载数据...' /> : null}
          />
          <When condition={hasMoreData}>
            <Pagination
              {...pagination}
              style={{ marginTop: 20 }}
              locale={{
                prevText: (<span className="arrow-align"><Icon type="left" />上一页</span>),
                nextText: (<span className="arrow-align">下一页<Icon type="right" /></span>),
              }}
            />
          </When>
          <When condition={hasNoData}>
            <Result
              imgUrl='/edc/images/mobile/no_data.png'
              title='暂无数据'
              message='请尝试导入或收集表单数据'
            />
          </When>
        </When>
        <When condition={noForm}>
          <Result
            imgUrl='/edc/images/mobile/no_data.png'
            title='暂无数据'
            message='请检查表单是否创建'
          />
        </When>
      </Fragment>
    );
  }
}